<template>
  <div class="prop-editing">
    <div class="prop-editing__wrapper">
      <div class="prop-editing__content">
        <div class="text-block">
          <div class="text-block-label">输入方块</div>
          <v-text-field
            variant="underlined"
            ref="inputRef"
            hide-details
          ></v-text-field>
        </div>
        <div class="text-block">
          <div class="text-block-label">选择方块</div>
          <v-select
            hide-details
            :items="[
              'California',
              'Colorado',
              'Florida',
              'Georgia',
              'Texas',
              'Wyoming',
            ]"
            variant="underlined"
          ></v-select>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const inputRef = ref();
</script>

<style scoped lang="scss">
.prop-editing {
  min-height: 450px;
  height: 100%;
  border: 1px solid #000;
  border-radius: 5px;
  &__wrapper {
    height: 100%;
    padding: 5px;
    border-radius: 5px;
    // border: 5px solid #fff;
    // border-color: #FFF #373737#373737 #FFF;
    // border-width: 5px 3px 3px 5px;
    background-image: linear-gradient(
      153.7deg,
      #fff 0%,
      #fff 50%,
      #555 50%,
      #555 100%
    );
  }
  &__content {
    height: 100%;
    padding: 10px;
    background-color: #8a8a8a;
    border: 3px solid;
    border-color: #373737 #fff #fff #373737;
    border-radius: 5px;
    .text-block {
      --v-input-control-height: 24px !important;
      display: inline-flex;
      align-items: center;
      height: 26px;
      width: 240px;
      :deep(.v-field__input) {
        padding-top: 0;
        text-align: center;
      }
      :deep(.v-field__append-inner) {
        padding-top: 0;
      }
    }
  }
}
</style>
